<!doctype html>



  


<html class="theme-next pisces use-motion">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
  <link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.0.1" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Hexo, NexT" />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.1" />






<meta property="og:type" content="website">
<meta property="og:title" content="西瓜古古🍉">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="西瓜古古🍉">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="西瓜古古🍉">



<script type="text/javascript" id="hexo.configuration">
  var NexT = window.NexT || {};
  var CONFIG = {
    scheme: 'Pisces',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: 0,
      author: '博主'
    }
  };
</script>

  <title> 西瓜古古🍉 </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-left 
   page-home 
 ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">西瓜古古🍉</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle"></p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-commonweal">
          <a href="/404.html" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-heartbeat"></i> <br />
            
            公益404
          </a>
        </li>
      

      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2017/09/26/函数的四种调用模式/" itemprop="url">
                  函数的四种调用模式
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2017-09-26T16:26:13+08:00" content="2017-09-26">
              2017-09-26
            </time>
          </span>

          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h2 id="相关资料"><a href="#相关资料" class="headerlink" title="相关资料"></a>相关资料</h2><p>[1] <a href="http://www.cnblogs.com/2010master/p/6029967.html" target="_blank" rel="external">http://www.cnblogs.com/2010master/p/6029967.html</a></p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>1.函数模式：this指向window<br>2.方法模式： 函数依附于一个对象，是对象的一个属性，this指向该对象<br>3.构造器调用模式：即是构造函数的调用，this指向创建的对象实例<br>4.上下文模式：本质是对象借用不属于该对象的方法，可以利用call()和apply()、bind()实现，this的指向和上下文有关。</p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2017/09/26/更改Mac电脑中指定文件的权限/" itemprop="url">
                  更改Mac电脑指定文件的额权限
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2017-09-26T11:46:21+08:00" content="2017-09-26">
              2017-09-26
            </time>
          </span>

          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>数字类型改变档案权限</p>
<p>linux档案的基本权限就有九个，分别是owner/group/others三种身份各有自己的read/write/execute权限。这九个权限是三个三个一组的。其中，我们可以使用数字来代表各个权限，各个权限的分数对照表如下：</p>
<p>r:4<br>w:2<br>x:1</p>
<p>每种身份（owner/group/others）各自的三个权限分数是需要累计的，例如当权限为: [-rwxrwx—] 分数则是:</p>
<p>owner = rwx = 4+2+1 = 7<br>group = rwx = 4+2+1 = 7<br>others= — = 4+2+1 = 7</p>
<p>所以我们设定权限的变更时，该档案的权限数字就是770了。</p>
<p>语法：<br>chmod -R 777 档案或目录<br>解释：<br>-R 进行递归的持续变更，亦即连同次目录下的所有档案都会变更</p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2017/09/25/模板引擎artTemplate学习笔记/" itemprop="url">
                  模板引擎artTemplate学习笔记
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2017-09-25T13:37:09+08:00" content="2017-09-25">
              2017-09-25
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/前端学习笔记/" itemprop="url" rel="index">
                    <span itemprop="name">前端学习笔记</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>-&gt; 本问的叙述是基于artTemplate3.0，4.0版本相关的知识会明确指出</p>
<h2 id="相关资料"><a href="#相关资料" class="headerlink" title="相关资料"></a>相关资料</h2><p>[1] <a href="https://aui.github.io/art-template/docs/" target="_blank" rel="external">https://aui.github.io/art-template/docs/</a></p>
<h2 id="一、为什么需要artTemplate"><a href="#一、为什么需要artTemplate" class="headerlink" title="一、为什么需要artTemplate"></a>一、为什么需要artTemplate</h2><p>页面大多情况下是需要根据后端数据动态渲染页面的，一般共3种方法</p>
<ul>
<li>1.字符串拼接<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> html = <span class="string">"&lt;div class=box&gt;盒子&lt;/div&gt;"</span>;</div><div class="line"><span class="built_in">document</span>.querySelector(<span class="string">"body"</span>).innerHTML = html;</div></pre></td></tr></table></figure>
</li>
</ul>
<p>缺点：当需要大量字符串拼接时容易出错</p>
<ul>
<li>2.添加节点<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> node = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</div><div class="line">node.innerHTML = <span class="string">"盒子"</span>;</div><div class="line"><span class="built_in">document</span>.querySelector(<span class="string">"body"</span>).appendChild(node);</div></pre></td></tr></table></figure>
</li>
</ul>
<p>缺点：大量操作DOM，不利于性能优化</p>
<ul>
<li>3.模板引擎(自用artTemplate)<br> 若ajax传回来的数据data中有属性name=”盒子”<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;script type=&quot;text/html&quot; id=&quot;id-name&quot;&gt;</div><div class="line">    &lt;div&gt;data.name&lt;/div&gt;</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure>
</li>
</ul>
<p>优点：使用模板引擎渲染页面更快</p>
<h2 id="artTemplate特性–摘自artTemplate官网"><a href="#artTemplate特性–摘自artTemplate官网" class="headerlink" title="artTemplate特性–摘自artTemplate官网"></a>artTemplate特性–摘自artTemplate官网</h2><ol>
<li>性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）</li>
<li>支持运行时调试，可精确定位异常模板所在语句（演示）</li>
<li>对 NodeJS Express 友好支持</li>
<li>安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）</li>
<li>支持include语句</li>
<li>可在浏览器端实现按路径加载模板（详情）</li>
<li>支持预编译，可将模板转换成为非常精简的 js 文件</li>
<li>模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选</li>
<li>支持所有流行的浏览器</li>
</ol>
<h2 id="二、artTemplate的模板语法分类"><a href="#二、artTemplate的模板语法分类" class="headerlink" title="二、artTemplate的模板语法分类"></a>二、artTemplate的模板语法分类</h2><ul>
<li><p>简洁语法<br>  引包-template.js</p>
</li>
<li><p>原生语法(自用)<br>  引包-template-native.js</p>
<p>  自用原生语法，因为可以直接书写js原生代码</p>
<h2 id="三、方法"><a href="#三、方法" class="headerlink" title="三、方法"></a>三、方法</h2><ul>
<li>template(id, data)<br>  根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。<br>  如果没有 data 参数，那么将返回一渲染函数。</li>
<li><p>template.helper(name, callback)<br>  添加辅助方法。可以将全局变量传入模板以便使用。<br> -示例如下,为了能够使用jQuery等全局变量需要如下代码</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">&lt;script&gt;</div><div class="line">    /*帮助申明一个模版内能使用的函数*/</div><div class="line">    template.helper(&apos;get&apos;,function () &#123;</div><div class="line">        return &#123;</div><div class="line">            $:jQuery,</div><div class="line">            console:console,</div><div class="line">            Math: window.Math</div><div class="line">        &#125;;</div><div class="line">    &#125;);</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure>
<p>  -&gt; 4.0 版本helper已经不能使用，需要使用如下方法</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">template.defaults.imports.functionName = function()&#123;</div><div class="line">    // doSomething</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>  -&gt; 实例如下</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">template.defaults.imports.get = function() &#123;</div><div class="line">   return &#123;</div><div class="line">       $: jQuery,</div><div class="line">       Math: window.Math,</div><div class="line">       Date: window.Date,</div><div class="line">       String: window.String</div><div class="line">   &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>template.compile(source, options)<br>  将返回一个渲染函数。</p>
</li>
<li><p>template.render(source, options)<br>  将返回渲染结果。</p>
</li>
<li><p>template.config(name, value)<br>更改引擎的默认配置。</p>
<h2 id="四、使用小结"><a href="#四、使用小结" class="headerlink" title="四、使用小结"></a>四、使用小结</h2></li>
</ul>
</li>
</ul>
<ul>
<li><p>data必须是对象<br>模板传入的数据必须是对象，遍历的时候只能遍历data中的属性 </p>
</li>
<li><p>模版输出语法 </p>
<ol>
<li><p>模板逻辑输出  &lt;%   %&gt;<br>-示例</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">&lt;% for(var i=0; i&lt; data.length; i++) &#123; %&gt;</div><div class="line">&lt;% &#125; %&gt;</div></pre></td></tr></table></figure>
</li>
<li><p>输出变量  &lt;%=  %&gt;<br>-示例</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;%= data.name %&gt;</div></pre></td></tr></table></figure>
</li>
<li><p>输出编码后数据<br>-示例,说明：若后端传回的数据类似</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&quot;&lt;img src=&apos;http:www.baidu.com/666&apos; alt=&apos;picture&apos;&gt;&quot;,</div></pre></td></tr></table></figure>
<p>可以使用如下输出语法，可以将其在html文件中编译为img标签</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;%=# data.img %&gt;</div></pre></td></tr></table></figure>
</li>
</ol>
</li>
<li><p><strong style="color:red">js语法不能用在模版内     变量 函数 分支循环</strong><br>解决方法:使用辅助函数 帮助申明一个模版内能使用的函数<br>借助template.helper()<br><strong style="color: red">辅助函数只能是 var  fn = function (){  // code}的形式</strong></p>
</li>
</ul>
<h2 id="四、常用使用实例"><a href="#四、常用使用实例" class="headerlink" title="四、常用使用实例"></a>四、常用使用实例</h2><h3 id="案例1"><a href="#案例1" class="headerlink" title="案例1"></a>案例1</h3><ul>
<li><p>功能简介：往某个div中动态添加从后端传输回来的数据</p>
<ul>
<li><p>返回数据data假设如下：{name: “盒子”}</p>
</li>
<li><p>最终实现效果为：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"outer"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>盒子<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>采用ajax进行异步数据交互</p>
</li>
</ul>
</li>
<li><p>具体实现代码</p>
<ul>
<li><p>html代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"outer"</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
<li><p>js代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">$.ajax(&#123;</div><div class="line">    url: <span class="string">"后端入口地址"</span>,</div><div class="line">    type: <span class="string">"文件传输方式,取值为get或post"</span>,</div><div class="line">    dataType: <span class="string">"数据返回格式json,其他取值可为xml等"</span>,</div><div class="line">    success: <span class="function"><span class="keyword">function</span>(<span class="params">data</span>) </span>&#123;</div><div class="line">      <span class="comment">// 成功执行函数</span></div><div class="line">      $(<span class="string">"#outer"</span>).html(template(<span class="string">"newBox"</span>,data));</div><div class="line">    &#125;,</div><div class="line">    error: <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</div><div class="line">     <span class="comment">// 失败执行函数</span></div><div class="line">    &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
</li>
<li><p>html文件中的模板如下</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;script type=&quot;text/html&quot; id=&quot;newBox&quot;&gt;</div><div class="line">    &lt;div&gt;data.name&lt;/div&gt;</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<h3 id="案例2"><a href="#案例2" class="headerlink" title="案例2"></a>案例2</h3><ul>
<li>功能简介：依据后端传回来的数据动态生成制定数目的option标签</li>
<li>具体实现代码<ul>
<li>模板代码<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">&lt;script type=&quot;text/html&quot; id=&quot;pages&quot;&gt;</div><div class="line">    &lt;%</div><div class="line">        var getCeil = function(num1,num2)&#123;</div><div class="line">            return num1/num2;</div><div class="line">        &#125;</div><div class="line">    %&gt;</div><div class="line">    &lt;select name=&quot;products-page&quot; id=&quot;page-num&quot;&gt;</div><div class="line">        &lt;% for(var i=0 ;i &lt; getCeil(totalCount,pagesize); i ++) &#123; %&gt;</div><div class="line">        &lt;option value=&quot;&lt;%= (i+1) %&gt;&quot;&gt;&lt;%= (i+1) %&gt;/&lt;%= getCeil(totalCount,pagesize) %&gt;&lt;/option&gt;</div><div class="line">        &lt;% &#125; %&gt;</div><div class="line">    &lt;/select&gt;</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<h3 id="案例3"><a href="#案例3" class="headerlink" title="案例3"></a>案例3</h3><ul>
<li><p>具体实现代码</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">&lt;script type=&quot;text/template&quot; id=&quot;template&quot;&gt;</div><div class="line">    &lt;% var $ = get().$; %&gt;</div><div class="line">    &lt;% $.each(list,function(i,item)&#123; %&gt;</div><div class="line">        &lt;tr&gt;</div><div class="line">            &lt;td&gt;&lt;%=i+1 %&gt;&lt;/td&gt;</div><div class="line">            &lt;td&gt;&lt;img width=&quot;100&quot; src=&quot;&lt;%=item.url %&gt;&quot; alt=&quot;&quot;&gt;&lt;/td&gt;</div><div class="line">            &lt;td&gt;&lt;%=#item.nowPrice %&gt;&lt;/td&gt;</div><div class="line">            &lt;% if(item.oldPrice &gt; 1000)&#123; %&gt;</div><div class="line">                &lt;td style=&quot;color: red&quot;&gt;&lt;%=item.oldPrice %&gt;&lt;/td&gt;</div><div class="line">            &lt;% &#125;else&#123; %&gt;</div><div class="line">                &lt;td&gt;&lt;%=item.oldPrice %&gt;&lt;/td&gt;</div><div class="line">            &lt;% &#125; %&gt;</div><div class="line">        &lt;/tr&gt;</div><div class="line">    &lt;% &#125;); %&gt;</div><div class="line">&lt;/script&gt;</div><div class="line">&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;</div><div class="line">&lt;script src=&quot;js/template-native.js&quot;&gt;&lt;/script&gt;</div></pre></td></tr></table></figure>
<ul>
<li>说明<br>为了能够使用jQuery还需要如下代码<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">&lt;script&gt;</div><div class="line">    /*帮助申明一个模版内能使用的函数*/</div><div class="line">    template.helper(&apos;get&apos;,function () &#123;</div><div class="line">        return &#123;$:jQuery,console:console&#125;;</div><div class="line">    &#125;);</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2017/09/24/富文本插件/" itemprop="url">
                  富文本插件
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2017-09-24T16:07:51+08:00" content="2017-09-24">
              2017-09-24
            </time>
          </span>

          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h2 id="ckEditor"><a href="#ckEditor" class="headerlink" title="ckEditor"></a>ckEditor</h2><h2 id="UEditor"><a href="#UEditor" class="headerlink" title="UEditor"></a>UEditor</h2>
          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2017/09/24/jsonp/" itemprop="url">
                  未命名
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2017-09-24T00:05:41+08:00" content="2017-09-24">
              2017-09-24
            </time>
          </span>

          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>title: jsonp详解<br>tags:</p>
<h2 id="categories"><a href="#categories" class="headerlink" title="categories:"></a>categories:</h2><p>##<br>ajax不允许跨域获取数据<br>说明，假定后端语言是   PHP</p>
<h2 id="script标签"><a href="#script标签" class="headerlink" title="script标签"></a>script标签</h2><p>jsonp的原理：script标签具有跨域性，可以利用Script标签的src属性发送跨域请求，获取相应数据<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">&lt;script src=&quot;域名/域名下的php文件名?callbackName=fnName&quot;&gt;&lt;/script&gt;</div><div class="line">&lt;script&gt;</div><div class="line">    // 回调函数</div><div class="line">    function fnName(data)&#123;</div><div class="line">        console.log(data);</div><div class="line">    &#125;</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure></p>
<p>后端返回的是js代码，是函数调用<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;?php $callbackName = $_GET[&apos;callback&apos;] </div><div class="line">echo $callbackName.&apos;(hello world)&apos;;</div><div class="line">?&gt;</div></pre></td></tr></table></figure></p>
<h2 id="jQuery-jsonp"><a href="#jQuery-jsonp" class="headerlink" title="jQuery-jsonp"></a>jQuery-jsonp</h2><p>type必须是get<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">$.ajax(&#123;</div><div class="line">    url: &quot;域名/域名下的php文件名&quot;,</div><div class="line">    dataType: &quot;jsonp&quot;,</div><div class="line">    jsonp: &quot;callbackName&quot;,  // 约定等号左边的key，服务器根据该名称获取回调函数名称</div><div class="line">    jsonpCallback: &quot;fnName&quot;, // 约定等号右边的value，标识回调函数名称</div><div class="line">    success: function()&#123;</div><div class="line">        // todo</div><div class="line">    &#125;,</div><div class="line">    error: function()&#123;</div><div class="line">        // todo</div><div class="line">    &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure></p>
<h2 id="模仿封装jQuery-ajax"><a href="#模仿封装jQuery-ajax" class="headerlink" title="模仿封装jQuery-ajax"></a>模仿封装jQuery-ajax</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">myAjax</span>(<span class="params">options</span>) </span>&#123;</div><div class="line">  <span class="comment">// 默认值</span></div><div class="line">  <span class="keyword">var</span> defaults = &#123;</div><div class="line">      jsonp: <span class="string">"callback"</span>,</div><div class="line">      jsopCallback: <span class="string">"jQuery"</span>+ (<span class="string">'v3.1.1'</span>+ <span class="built_in">Math</span>.random()).replace(<span class="regexp">/\D/g</span>,<span class="string">''</span>)+<span class="string">"_"</span>+<span class="keyword">new</span> <span class="built_in">Date</span>().getTime();</div><div class="line">  &#125;;</div><div class="line">  <span class="comment">// window是全局对象，[]中的值可以是变量，也可以是字符串</span></div><div class="line">  <span class="built_in">window</span>[defaults.jsopCallback] = <span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</div><div class="line">      defaults.success(data);</div><div class="line">  &#125;;</div><div class="line">  <span class="comment">// 处理业务参数,把data数据转换为查询字符串</span></div><div class="line">  <span class="keyword">var</span> param = <span class="string">''</span>;</div><div class="line">  <span class="keyword">if</span>(defaults.data)&#123;</div><div class="line">      <span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> defaults.data)&#123;</div><div class="line">          param += key+<span class="string">"="</span>+defaults.data[key]+<span class="string">"&amp;"</span>;</div><div class="line">      &#125;</div><div class="line">  &#125;</div><div class="line">  </div><div class="line">  <span class="comment">// 使用设置参数覆盖默认配置</span></div><div class="line">  <span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> options)&#123;</div><div class="line">      defaults[key] = options[key];</div><div class="line">  &#125;;</div><div class="line">  <span class="comment">// 处理跨域请求</span></div><div class="line">  <span class="keyword">var</span> script = <span class="built_in">document</span>.createElement(<span class="string">"script"</span>);</div><div class="line">  script.src = defaults.url+<span class="string">"?"</span>+ param + defaults.jsonp+<span class="string">"="</span>+defaults.jsonpCallback;</div><div class="line">  <span class="keyword">var</span> head = <span class="built_in">document</span>.querySelector(<span class="string">"head"</span>);</div><div class="line">  head.appendChild(script);</div><div class="line">  &#125;</div></pre></td></tr></table></figure>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2017/09/23/jQuery插件-validate/" itemprop="url">
                  Query插件-validate
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2017-09-23T23:15:08+08:00" content="2017-09-23">
              2017-09-23
            </time>
          </span>

          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h2 id="相关资料"><a href="#相关资料" class="headerlink" title="相关资料"></a>相关资料</h2><p>[1] <a href="http://www.runoob.com/jquery/jquery-plugin-validate.html" target="_blank" rel="external">http://www.runoob.com/jquery/jquery-plugin-validate.html</a><br>[2] <a href="http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html" target="_blank" rel="external">http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html</a></p>
<h2 id="使用说明"><a href="#使用说明" class="headerlink" title="使用说明"></a>使用说明</h2><ul>
<li>选取form表单元素，提交按钮应该为<br><input type="submit" value=""><br>$(‘form’).validate({</li>
</ul>
<p>})</p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2017/09/23/jQuery-validate的官方说明文档/" itemprop="url">
                  jQuery-validate的官方说明文档
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2017-09-23T22:08:02+08:00" content="2017-09-23">
              2017-09-23
            </time>
          </span>

          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <blockquote>
<p>Coming soon: <a href="https://github.com/Tradusy/warble" target="_blank" rel="external">Warble is a client side and server side library to quickly handle your data writing less and doing more</a>.</p>
</blockquote>
<h1 id="jQuery-Validate"><a href="#jQuery-Validate" class="headerlink" title="jQuery Validate"></a>jQuery Validate</h1><blockquote>
<p>License: <a href="http://www.opensource.org/licenses/mit-license.php" target="_blank"><em>MIT</em></a>.</p>
<p>Version: <em>1.1.2</em>.</p>
<p>Requires: <em>jQuery 1.7+</em>.</p>
</blockquote>
<p>To use <em>jQuery Validate</em> you just need to include in your code a version of the <a href="http://jquery.com/" target="_blank">jQuery library</a> equal or more recent than <code>1.7</code> and a file with the plugin. <a href="https://www.dropbox.com/s/p5xhpb52572xy5b/jQuery%20Validate%201.1.2.zip" target="_blank">Click here to download the plugin</a>.</p>
<p>After this, you just need select your form and calling the <code>jQuery.fn.validate</code> method.</p>
<p>See a example:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">jQuery(<span class="string">'form'</span>).validate();</div></pre></td></tr></table></figure></p>
<p>After calling the <code>jQuery.fn.validate</code> method, you can validate your fields using <a href="http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes" target="_blank">data attributes</a>, that are valid to the <a href="http://www.w3.org/TR/html5/" target="_blank">HTML5</a>, according to the <a href="http://www.w3.org/" target="_blank">W3C</a>.</p>
<p>See a example to required field:<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">data-required</span> /&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></div></pre></td></tr></table></figure></p>
<p><em>jQuery Validate</em> supports all fields of the HTML5 and uses <a href="http://www.w3.org/WAI/PF/aria/" target="_blank">WAI-ARIA</a> for accessibility. You can use several attributes to your validations.</p>
<h2 id="Attributes"><a href="#Attributes" class="headerlink" title="Attributes"></a>Attributes</h2><table><br>    <tr><br>        <th width="110px">Attribute</th><br><br>        <th>Description</th><br><br>        <th width="75px">Default</th><br>    </tr><br><br>    <tr><br>        <td>data-conditional</td><br><br>        <td>Accepts one or more indexes separated by spaces from the <code>conditional</code> object that should contain a the boolean return function.</td><br><br>        <td></td><br>    </tr><br><br>    <tr><br>        <td>data-ignore-case</td><br><br>        <td>Accepts a boolean value to specify if field is case-insensitive.</td><br><br>        <td>true</td><br>    </tr><br><br>    <tr><br>        <td>data-mask</td><br><br>        <td>Accepts a mask to change the field value to the specified format. The mask should use the character groups of the regular expression passed to the <a href="#data-pattern"><code>data-pattern</code></a> attribute.</td><br><br>        <td>${0}</td><br>    </tr><br><br>    <tr><br>        <td>data-pattern</td><br><br>        <td>Accepts a regular expression to test the field value.</td><br><br>        <td>/(?:)/</td><br>    </tr><br><br>    <tr><br>        <td>data-prepare</td><br><br>        <td>Accepts a index from the <code>prepare</code> object that should contain a function to receive the field value and returns a new value treated.</td><br><br>        <td></td><br>    </tr><br><br>    <tr><br>        <td>data-required</td><br><br>        <td>Accepts a boolean value to specify if field is required.</td><br><br>        <td>false</td><br>    </tr><br><br>    <tr><br>        <td>data-trim</td><br><br>        <td>Accepts a boolean value. If true, removes the spaces from the ends in the field value. (The field value is not changed)</td><br><br>        <td>false</td><br>    </tr><br><br>    <tr><br>        <td>data-validate</td><br><br>        <td>You can use the <code>data-validate</code> to calling extensions.</td><br><br>        <td></td><br>    </tr><br></table>

<h2 id="Parameters"><a href="#Parameters" class="headerlink" title="Parameters"></a>Parameters</h2><table><br>    <tr><br>        <th width="110px">Parameter</th><br><br>        <th>Description</th><br><br>        <th width="75px">Default</th><br>    </tr><br><br>    <tr><br>        <td>conditional</td><br><br>        <td>Accepts a object to store functions from validation.</td><br><br>        <td></td><br>    </tr><br><br>    <tr><br>        <td>filter</td><br><br>        <td>Accepts a selector string or function to filter the validated fields.</td><br><br>        <td>*</td><br>    </tr><br><br>    <tr><br>        <td>nameSpace</td><br><br>        <td>A namespace used in all delegates events.</td><br><br>        <td>validate</td><br>    </tr><br><br>    <tr><br>        <td>onBlur</td><br><br>        <td>Accepts a boolean value. If true, triggers the validation when blur the field.</td><br><br>        <td>false</td><br>    </tr><br><br>    <tr><br>        <td>onChange</td><br><br>        <td>Accepts a boolean value. If true, triggers the validation when change the field value.</td><br><br>        <td>false</td><br>    </tr><br><br>    <tr><br>        <td>onKeyup</td><br><br>        <td>Accepts a boolean value. If true, triggers the validation when press any key.</td><br><br>        <td>false</td><br>    </tr><br><br>    <tr><br>        <td>onSubmit</td><br><br>        <td>Accepts a boolean value. If true, triggers the validation when submit the form.</td><br><br>        <td>true</td><br>    </tr><br><br>    <tr><br>        <td>prepare</td><br><br>        <td>Accepts a object to store functions to prepare the field values.</td><br><br>        <td></td><br>    </tr><br><br>    <tr><br>        <td>sendForm</td><br><br>        <td>Accepts a boolean value. If false, prevents submit the form (Useful to submit forms via <a href="http://api.jquery.com/jQuery.ajax/" target="_blank">AJAX</a>).</td><br><br>        <td>true</td><br>    </tr><br><br>    <tr><br>        <td>waiAria</td><br><br>        <td>Accepts a boolean value. If false, disables <a href="http://www.w3.org/WAI/PF/aria/" target="_blank">WAI-ARIA</a>.</td><br><br>        <td>true</td><br>    </tr><br></table>

<h2 id="Callbacks"><a href="#Callbacks" class="headerlink" title="Callbacks"></a>Callbacks</h2><table><br>    <tr><br>        <th width="110px">Callback</th><br><br>        <th>Description</th><br>    </tr><br><br>    <tr><br>        <td>valid</td><br><br>        <td>Accepts a function to be calling when form is valid. The context (<code>this</code>) is the current verified form and the parameters are respectively <code>event</code> and <code>options</code>.</td><br>    </tr><br><br>    <tr><br>        <td>invalid</td><br><br>        <td>Accepts a function to be calling when form is invalid. The context (<code>this</code>) is the current verified form and the parameters are respectively <code>event</code> and <code>options</code>.</td><br>    </tr><br><br>    <tr><br>        <td>eachField</td><br><br>        <td>Accepts a function to be calling to each field. The context (<code>this</code>) is the current verified field and the parameters are respectively <code>event</code>, <code>status</code> and <code>options</code>.</td><br>    </tr><br><br>    <tr><br>        <td>eachInvalidField</td><br><br>        <td>Accepts a function to be calling when field is invalid. The context (<code>this</code>) is the current verified field and the parameters are respectively <code>event</code>, <code>status</code> and <code>options</code>.</td><br>    </tr><br><br>    <tr><br>        <td>eachValidField</td><br><br>        <td>Accepts a function to be calling when field is valid. The context (<code>this</code>) is the current verified field and the parameters are respectively <code>event</code>, <code>status</code> and <code>options</code>.</td><br>    </tr><br></table>

<h2 id="Removing-validation"><a href="#Removing-validation" class="headerlink" title="Removing validation"></a>Removing validation</h2><p>You can remove validation of a form using the <code>jQuery.fn.validateDestroy</code> method.</p>
<p>Example:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">jQuery(<span class="string">'form'</span>).validateDestroy();</div></pre></td></tr></table></figure></p>
<h2 id="Changing-the-default-values-of-jQuery-fn-validate"><a href="#Changing-the-default-values-of-jQuery-fn-validate" class="headerlink" title="Changing the default values of jQuery.fn.validate"></a>Changing the default values of <code>jQuery.fn.validate</code></h2><p>You can changes the default values of <code>jQuery.fn.validate</code> using <code>jQuery.validateSetup</code> method.</p>
<p>Example:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">jQuery(<span class="string">'form'</span>).validateSetup(&#123;</div><div class="line">	sendForm : <span class="literal">false</span>,</div><div class="line">	onKeyup : <span class="literal">true</span></div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<h2 id="Creating-descriptions"><a href="#Creating-descriptions" class="headerlink" title="Creating descriptions"></a>Creating descriptions</h2><p>You can create descriptions to the field states.</p>
<p>Example:<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">data-describedby</span>=<span class="string">"messages"</span> <span class="attr">data-description</span>=<span class="string">"test"</span> /&gt;</span></div><div class="line"></div><div class="line">	<span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"messages"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></div></pre></td></tr></table></figure></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">$(<span class="string">'form'</span>).validate(&#123;</div><div class="line">	description : &#123;</div><div class="line">		test : &#123;</div><div class="line">			required : <span class="string">'&lt;div class="error"&gt;Required&lt;/div&gt;'</span>,</div><div class="line">			pattern : <span class="string">'&lt;div class="error"&gt;Pattern&lt;/div&gt;'</span>,</div><div class="line">			conditional : <span class="string">'&lt;div class="error"&gt;Conditional&lt;/div&gt;'</span>,</div><div class="line">			valid : <span class="string">'&lt;div class="success"&gt;Valid&lt;/div&gt;'</span></div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<h2 id="Creating-extensions"><a href="#Creating-extensions" class="headerlink" title="Creating extensions"></a>Creating extensions</h2><p>You can use the <code>jQuery.validateExtend</code> method to extend the validations and calling the extensions with <code>data-validate</code> attribute.</p>
<p>Example:<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"age"</span> <span class="attr">data-validate</span>=<span class="string">"age"</span> /&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></div></pre></td></tr></table></figure></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">jQuery(<span class="string">'form'</span>).validate();</div><div class="line"></div><div class="line">jQuery.validateExtend(&#123;</div><div class="line">	age : &#123;</div><div class="line">		required : <span class="literal">true</span>,</div><div class="line">		pattern : <span class="regexp">/^[0-9]+$/</span>,</div><div class="line">		conditional : <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</div><div class="line"></div><div class="line">			<span class="keyword">return</span> <span class="built_in">Number</span>(value) &gt; <span class="number">17</span>;</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2017/09/22/jQuery插件--uploadify/" itemprop="url">
                  jQuery插件--uploadify
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2017-09-22T17:14:15+08:00" content="2017-09-22">
              2017-09-22
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/jQuery插件/" itemprop="url" rel="index">
                    <span itemprop="name">jQuery插件</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            
          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2017/09/21/ajax跨域/" itemprop="url">
                  Ajax跨域
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2017-09-21T18:22:38+08:00" content="2017-09-21">
              2017-09-21
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/Ajax/" itemprop="url" rel="index">
                    <span itemprop="name">Ajax</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>（2017.8.14）</p>
<h2 id="URL"><a href="#URL" class="headerlink" title="URL"></a>URL</h2><p>url: scheme:://host:port/path?query#fragment</p>
<ul>
<li>scheme: 协议 http/https/ftp/file</li>
<li>host: 域名或者IP地址</li>
<li>path: 路径</li>
<li>port: 端口(文件配置时1024以下的端口最好不要用)，区分网络应用程序，相同的应用程序之间交互信息</li>
<li>query: 查询字符串。参数格式: key=value&amp;key2=value2</li>
<li>fragment: 锚点、hash哈希，定位页面的额某个位置<h2 id="同源"><a href="#同源" class="headerlink" title="同源"></a>同源</h2>协议，域名，端口均相同</li>
</ul>
<h2 id="跨域"><a href="#跨域" class="headerlink" title="跨域"></a>跨域</h2><p>不满足同源即为跨域<br>具备跨域资源请求能力的标签：iframe、link、script、video、audeo</p>
<h2 id="解决-方法"><a href="#解决-方法" class="headerlink" title="解决 方法"></a>解决 方法</h2><h3 id="解决方法-cors（Cross-origin-resource-sharing）"><a href="#解决方法-cors（Cross-origin-resource-sharing）" class="headerlink" title="解决方法 cors（Cross-origin resource sharing）"></a>解决方法 cors（Cross-origin resource sharing）</h3><ul>
<li>cors在移动端支持度不错，可以考虑在移动端全面尝试</li>
<li>pc上有不兼容和没有完美支持，小心踩坑</li>
<li>jsop是get形式，承载的信息量有限，所以信息量较大时cors是不错的选择</li>
</ul>
<p>&lt;?php<br>    header(‘Access-Control-Allow-Origin:<a href="http://www.study.com" target="_blank" rel="external">http://www.study.com</a>‘);<br>    -&gt; 允许固定网址可访问<br>    header(‘Access-Control-Allow-Origin:*’);<br>    -&gt; 允许所有访问<br>?&gt;</p>
<h3 id="解决方法-jsonp"><a href="#解决方法-jsonp" class="headerlink" title="解决方法 jsonp"></a>解决方法 jsonp</h3><ul>
<li>只适合get请求</li>
<li>jsonp利用了script标签的可跨域特性 </li>
<li><p>每发一次请求就创建一个Script标签，在标签中传输信息</p>
</li>
<li><p>调用<br>$.ajax({<br> url: ‘url—‘,<br> jsonp: “”,  // 约定等号左边的值key(服务器根据该名称获取回调函数 )<br> jsonpCallback:  // 约定等号右边的value<br>})</p>
<h3 id="反向代理"><a href="#反向代理" class="headerlink" title="反向代理"></a>反向代理</h3></li>
<li>修改配置文件<br>将想要访问的网址加入到配置该虚拟域名文档中</li>
<li>示例<br>例如：当前是www.study.com中的文件，想要访问api.study.com<br>配置虚拟域名的文档httpd-vhosts.conf中<br>在www.study.com的配置行加入ProxyPass /api <a href="http://api.study.com" target="_blank" rel="external">http://api.study.com</a><br>ajax请求是url必须写成/api<h3 id="解决方法-document-domain-iframe标签"><a href="#解决方法-document-domain-iframe标签" class="headerlink" title="解决方法 document.domain + iframe标签"></a>解决方法 document.domain + iframe标签</h3></li>
<li><p>适合顶级域名相同的情况<br>如 www.baidu.com 和 api.baidu.com</p>
</li>
<li><p>互相访问的两个html文件都设置</p>
<script>
  document.domain = "baidu.com";
</script>

</li>
</ul>
<h3 id="解决方法-hash"><a href="#解决方法-hash" class="headerlink" title="解决方法  hash"></a>解决方法  hash</h3><h3 id="解决方法-name"><a href="#解决方法-name" class="headerlink" title="解决方法  name"></a>解决方法  name</h3>
          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/2017/09/21/模块化规范/" itemprop="url">
                  模块化规范
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2017-09-21T15:09:20+08:00" content="2017-09-21">
              2017-09-21
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/模块化/" itemprop="url" rel="index">
                    <span itemprop="name">模块化</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h2 id="sea-js"><a href="#sea-js" class="headerlink" title="sea.js"></a>sea.js</h2><h2 id="require-js"><a href="#require-js" class="headerlink" title="require.js"></a>require.js</h2><h3 id="一、定义-处理依赖、导出成员"><a href="#一、定义-处理依赖、导出成员" class="headerlink" title="一、定义(处理依赖、导出成员)"></a>一、定义(处理依赖、导出成员)</h3><p>define()</p>
<h3 id="二、使用"><a href="#二、使用" class="headerlink" title="二、使用"></a>二、使用</h3><h3 id="配置属性"><a href="#配置属性" class="headerlink" title="配置属性"></a>配置属性</h3><p>baseUrl: 设置查找模块文件的基准路径<br>paths: 给模块起别名<br>shim: 加载非标准模块</p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
  </section>

  
  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right"></i></a>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      

      <section class="site-overview sidebar-panel  sidebar-panel-active ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/images/23103K3MK.jpg"
               alt="beikexixi" />
          <p class="site-author-name" itemprop="name">beikexixi</p>
          <p class="site-description motion-element" itemprop="description"></p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">35</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">9</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">10</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com" target="_blank" title="Github">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  Github
                </a>
              </span>
            
          
        </div>

        
        

        
        

      </section>

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">beikexixi</span>
</div>

<div class="powered-by">
  由 <a class="theme-link" href="http://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>

        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/vendors/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/vendors/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.0.1"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.0.1"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.0.1"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.0.1"></script>



  

  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.1"></script>



  



  



  
  
  

  

  

</body>
</html>
